import 'package:flutter/material.dart';
import 'package:image_picker_plus_nic/image_picker_plus_nic.dart';

import 'gallery_display.dart';
import 'utilities/enum.dart';

enum DisplayMode {
  normal, //正常模式 白底 90%
  preview, //預覽模式 黑底 100%
}

// 對話框元件
class DialogWidget extends StatefulWidget {
  const DialogWidget({
    Key? key,
    required this.source,
    required this.galleryDisplaySettings,
    required this.pickerSource,
    required this.heightFactor,
    required this.multiSelection,
    required this.primaryColor,
    required this.textStyle,
    this.selectIndex,
    this.onCancel,
  }) : super(key: key);
  final double heightFactor;
  final ImageSource source;
  final GalleryDisplaySettings galleryDisplaySettings;
  final bool multiSelection;
  final PickerSource pickerSource;
  final int? selectIndex;
  final Color primaryColor;
  final TextStyle textStyle;
  final void Function()? onCancel;

  @override
  State<DialogWidget> createState() => _DialogWidgetState();
}

class _DialogWidgetState extends State<DialogWidget> {
  DisplayMode _mode = DisplayMode.normal;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: _mode == DisplayMode.normal ? Colors.transparent : Colors.black,
      child: Stack(
        alignment: Alignment.topCenter,
        clipBehavior: Clip.none,
        children: [
          FractionallySizedBox(
            heightFactor:
                _mode == DisplayMode.normal ? widget.heightFactor : 1.0,
            child: Column(
              children: [
                Padding(
                  padding:
                      const EdgeInsets.symmetric(vertical: 9, horizontal: 10),
                  child: Container(
                    height: 4,
                    width: 73,
                    decoration: BoxDecoration(
                      color: Colors.grey[300],
                      borderRadius: const BorderRadius.all(Radius.circular(8)),
                    ),
                  ),
                ),
                Expanded(
                  child: CustomImagePicker(
                    primaryColor: widget.primaryColor,
                    textStyle: widget.textStyle,
                    galleryDisplaySettings: widget.galleryDisplaySettings,
                    multiSelection: widget.multiSelection,
                    pickerSource: widget.pickerSource,
                    source: widget.source,
                    selectIndex: widget.selectIndex,
                    doChangeMode: doChangeMode,
                  ),
                ),
              ],
            ),
          ),
          Positioned(
            top: -50,
            right: 10,
            child: GestureDetector(
              onTap: () {
                //print("GestureDetector() Clicked");
              },
              child: ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: const Color(0xff666666), // Background color
                ),
                child: Text(
                  widget.galleryDisplaySettings.uiTexts.cancel,
                  style: const TextStyle(
                    fontSize: 14,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
                onPressed: () => widget.onCancel?.call(),
              ),
            ),
          ),
        ],
      ),
    );
  }

  // 變更模式
  void doChangeMode(DisplayMode m) {
    //print('doChangeMode(m=$m)');
    setState(() {
      _mode = m;
    });
  }
}
